What is HTML

HTML stands for Hyper Text Markup Language
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the page

Simple HTML document

Simple HTML document Explanation

Don't worry if these examples use tags you have not learned. You will learn about them in the next Section.

The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph


        NOTE:
        All HTML documents must start with a document type declaration: <!DOCTYPE html>.

        The HTML document itself begins with <html> and ends with </html>.

        The visible part of the HTML document is between <body> and </body>.
        
        All the letters, words and aphalnumeric words wrapped around square  brackets 
        i.e the greater-than and the less-than signs, are called HTML Tags.
        
        We will look into HTML tags next.
        Now Let's look at how to type HTML code and also view them.

EDITORS

We Write HTML Code Using Text or Code Editors

Editors make it easier to type, format and edit text or codes of a programming language like HTML.
There are different types of text editor just like the Notepad application on our PCs, but there are better editors primarily designed for writng programming codes. This Code Editors add extra spice to our typing experience as they come with additional colours for different type of codes. They also provide other addons and plugins that make it easier for the developers to type and edit their codes. Most of these editors are freely available for download, while some have paid mode or pro versions. some examples of such editors:

Notepad++
Sublime text
Visual Studio Code
Bracket
Atom Editor

Writing HTML CODE With Windows Notepad or Mac TextEdit

Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good way to learn HTML.
Follow the steps below to create your first web page with Notepad or TextEdit.

Step 1: Open Notepad (PC)

Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac)

Open Finder > Applications > TextEdit
Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"

Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text".

Then open a new document to place the code.

Step 2: Write Some HTML

Write or copy some HTML into Notepad.

      <!DOCTYPE html>
        <html>
          <head>
            <title>
                document
            </title>
          </head>
          <body>
              <h1>
                My First Heading
              </h1>
              <p>
                My First Paragraph
              </p>
          </body>
        </html>

    If You are using Notepad, see the sample below:

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").

The result will look much like this:

 NOW, Let's take a look at how to view HTML Code

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them.

Some webbrowser examples include:

Opera Mini
Firefox
Safari
Chrome
Pheonix

The browser does not display the HTML tags, but uses them to determine how to display the document:

How to Create your first Webpage

Step 1: Create A Development Folder On Your Desktop Environment

GOTO YOUR DESKTOP ENVIRONMENT
RIGHT-CLICK TO OPEN DIALOGUE BOX
SCROLL DOWN TO THE LAST OPTION (NEW)
CLICK ON NEW and SELECT FOLDER
CLICK ON FOLDER AND TYPE THE FOLDER NAME NAME : WEB DEVELOPMENT
Create another folder inside WEB DEVELOPMENT folder “my first webpage”

Step 2: Open Visual Studio Code Editor

Goto your menu and search for VS code
Double-click to open vs code.

Step 3: Open Your Work Folder On Vs Code

Click on Vs Code File Menu
Select Open folder from the drop down
On The dialogue box that will open, locate your work folder on your computer file manager
Click to select your work folder
Finally click on select folder

Step 4: Creating your first HTML File

On Vs code , hover your mouse on your work folder name that will appear after you have successfully opened the folder
Click on the displayed icon, with tage new file
On the input space where your cursor will be blinking, type your webpagename.html
Ensure that your file is saved with the .html extension
Hit enter on your keyboard to save
On the blank space that opens on vs code, type your code.

learning website development with mr joseph from henJo code academy